<template>
	<div class="content" v-if="is_show">
        <div class="content-top">
              充电机管理_实时监控
        </div>
           <div class="content-search station">
               <el-form inline :model="form" class="demo-form-inline" style="margin-top: 20px;">
                   <el-form-item label="换电站：">
                        <el-select placeholder="请选择站点" @change="onSelect" v-model="form.stationId">
                                    <el-option
                                        v-for="item in station_list"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                            </el-select>
                   </el-form-item>
               </el-form>
           </div>
           <div class="charger_list">
              <div class="charger" v-for="(item,idx) in chargerList" :key="idx" @click="chargerClick(item.id)">
                    <el-tooltip class="item" effect="dark" placement="right">
                        <div slot="content">提示</div>
                        <div class="warning" v-if="item.status == 3"><img src="@/assets/img/warning.svg" alt=""></div>
                    </el-tooltip>
                <div class="charger_icon" v-if="item.status == 3"><img src="@/assets/img/charger-red.svg" alt=""></div>
                <div class="charger_icon" v-else-if="item.status == 1"><img src="@/assets/img/charger.svg" alt=""></div>
                <div class="charger_icon" v-else-if="item.status == null"><img src="@/assets/img/charger-gray.svg" alt=""></div>
                <div class="charger_icon" v-else><img src="@/assets/img/charger-green.svg" alt=""></div>
                <div class="charger_text">
                    <div>名称：{{item.name}}</div>
                    <div>电池编号：{{item.batteryCode == null ?'未知':item.batteryCode}}</div>
                    <div>剩余充电时间：{{item.chargerTime == null ?'未知':item.chargerTime}}</div>
                    <div>电池SOC：{{item.soc == null ?'0':item.soc}}%</div>
                </div>
            </div>
           </div>
            <div class="car-title center-button">
                <center>
                    <el-button type="primary" @click="onBack"><i class="el-icon-back"></i>返回</el-button>
                </center>
            </div>
    </div>
    <ChargerDetail v-else @isDetail="isDetail" :id="id"></ChargerDetail>
</template>
<script>
import ChargerDetail from '@/components/charger/ChargerDetail.vue'
	export default {
        components:{
            ChargerDetail: ChargerDetail
        },
		data(){
            return{
               station_list:[],
               form:{
                   stationId:''
               },
               monitor_list:[],
               timer:null,
               chargerList:[],
               is_show:true,
               id:''
            }
        },
		mounted() {
            this.get_station_list()
		},
		methods: {
            chargerClick(id){
                this.id = id
                this.is_show = false
                clearInterval(this.timer);        
                this.timer = null;
            },
            isDetail(){
                this.is_show = true
                this.get_station_list()
            },
            onSelect(){
                this.get_monitor_list()
            },
            /* 换电站列表 */
			get_station_list() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/station/findPage', {
						"limit": "10000",
						"page": "1"
					})
					.then(function(res) {
						if (res != '') {
                            self.station_list = res.data.list;
                            self.form.stationId = self.station_list[0].id
                            self.timer = window.setInterval(() => {
                               setTimeout(self.get_monitor_list(), 0)
                            }, 500)
						}
				
					})
            },
            get_monitor_list(){
                var self = this;
				this.$axios.post(this.$global.serverIp + 'station/equipmentCharger/chargerMonitorList', {
						"limit": "100",
                        "page": "1",
                        "stationId":self.form.stationId
					})
					.then(function(res) {
						if (res != '') {
                            self.chargerList = res.data
						}
				
					})
            },
           
            onBack(){
                this.$emit('isMonitor')
            }

			
        },
        destroyed(){
            clearInterval(this.timer);        
            this.timer = null;
        },

	}
	import '@/assets/css/common.css'
</script>
<style scoped>
   
   .charger_list{
       padding: 0 20px;
       display: flex;
       flex-wrap: wrap;
      
   }
   .charger{
       width: 180px;
       height: 180px;
       border:1px solid #C9CDD1;
       background-color: #F2F6FA;
       font-size: 13px;
       display: flex;
       align-items: center;
       flex-direction: column;
       justify-content: space-around;
       position: relative;
       margin: 20px;
       cursor: pointer;
   }
   .charger_icon{
       width: 52px;
   }
   .charger_icon img,.warning img{
       width: 100%;
       height: 100%;
   }
   .charger_text{
       line-height: 22px;
   }
   .warning{
       width: 36px;
       position: absolute;
       right: 5px;
       top: 5px;
   }
</style>
